<template>
	<view v-if="pageShow" class="container">
		<view class="nav">
			<u-tabs :list="navList" @click="menuClick" :current="navCurrent" :scrollable="false" :activeStyle="{
						color: '#0177FD' ,fontSize: '28rpx', transform: 'scale(1)'}" :inactiveStyle="{
						color: '#333333',fontSize: '28rpx', transform: 'scale(1)'}" :itemStyle="{height: '90rpx'}">
			</u-tabs>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 90rpx);" refresher-threshold="50" :refresher-background="'#F7F7F7'"
			:refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="refresherrefresh"
			@scrolltolower="loadMore">
			<view class="order-list">
				<view class="order-item" v-for="(item, index) in orderData" :key="index">
					<view class="header">
						<view class="service-name" @click.stop="goService(item.serviceinfo)">
							<image :src="item.serviceinfo.logo" mode="aspectFill" class="img"></image>
							<text class="name">{{item.serviceinfo.name}}</text>
							<text class="cuIcon-right" style="margin-left: 14rpx;"></text>
						</view>
						<view class="status" :class="item.status===0?'status0':item.status===4?'status4':item.status===5?'status4':'status1'">
							<text>{{item.status===0?'待付款':item.status===1?'服务中···':item.status===2?'待确认':item.status===5?'已取消':'已完成'}}</text>
						</view>
					</view>
					<view class="order-content" @click.stop="goShopInfo(item)">
						<view class="shop-logo">
							<image :src="item.shopinfo.pic.split(',')[0]" mode="aspectFill" class="logo"></image>
						</view>
						<view class="shop-info">
							<text class="shop-name">{{item.shopinfo.name}}</text>
							<text class="shop-price">¥ {{item.shopinfo.price}}</text>
						</view>
					</view>
					<view class="true-service">
						<text>实付服务费：</text>
						<text class="true-price">¥ {{item.money}}</text>
					</view>
					<view class="bottom-btn">
						<view v-if="item.status === 5" class="btn-del" @click="delOrder(item)">
							删除订单
						</view>
						<view v-if="item.status === 0" class="header-count">
							支付倒计时：<count-down :end-time="item.createtime + 1800" :title-color="titleColor"></count-down>
						</view>
						<view class="flex-end">
							<view class="btn-detail" @click="orderDetail(item)">
								{{item.status===0?"立即支付":item.status===2?"确认验收":'查看详情'}}
							</view>
						</view>
					</view>
				</view>
				<uni-load-more v-if="orderData.length > 0" :status="listStatus"></uni-load-more>
				<view v-if="orderData.length === 0" class="empty-wrap" >
				  <image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
				  <text class="tips">暂无订单</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import orderApi from '@/api/order.js'
	import CountDown from "@/components/countDown/countDown.vue";
	export default {
		components: {
			CountDown
		},
		data() {
			return {
				navCurrent: 0, //一级导航序号
				navList: [
					{
						id: '',
						name: '全部',
						index: 0
					},
					{
						id: 0,
						name: '待付款',
						index: 1
					},
					{
						id: 1,
						name: '服务中',
						index: 2
					},
					{
						id: 2,
						name: '待确认',
						index: 3
					},
					{
						id: 4,
						name: '已完成',
						index: 4
					}
				],
				//数据列表
				orderData: [],
				//分页参数
				pageShow: false,
				page: 1,
				pageSize: 10,
				isRefreshing: false,
				listStatus: 'nomore',
				titleColor: '#FF9B21'
			}
		},
		onLoad(e) {
			this.navCurrent = e.index
		},
		onShow() {
			this.getList()
		},
		methods: {
			//获取列表数据
			async getList() {
				this.listStatus = 'loading'
				uni.showLoading({
					title: '加载中'
				})
				let obj;
				if(this.navCurrent == 0) {
					obj = {
						page: this.page,
						pagesize: this.pageSize
					}
				}else {
					obj = {
						page: this.page,
						pagesize: this.pageSize,
						status: this.navList[this.navCurrent].id
					}
				}
				const res = await orderApi.getOrderList(obj)
				if (res.code === 1) {
					let arr = []
					if (this.page == 1) {
						this.orderData = []
					}
					let newList = res.data.serviceorderlist
					if (newList.length >= this.pageSize) {
						this.listStatus = 'more'
					} else {
						this.listStatus = 'nomore'
					}
					let arr1 = arr.concat(newList)
					arr1.forEach(val => {
						let obj = {
							id: val.id,
							serviceinfo: val.serviceinfo,
							shopinfo: val.shopinfo,
							money: val.money,
							order_no: val.order_no,
							status: val.status,
							createtime: val.createtime
						}
						this.orderData.push(obj)
					})
					this.pageShow = true
					this.isRefreshing = false
					uni.hideLoading()
				}
			},
			
			//导航栏切换
			menuClick(e) {
				this.navCurrent = e.index
				this.getList()
			},
			
			//删除订单
			delOrder(val) {
				let id = val.id
				let that = this
				uni.showModal({
					title: '温馨提示',
					confirmText: '确认删除',
					confirmColor: "#0177FD",
					cancelColor: '#999',
					cancelText: '再想想',
					content: '确认删除此订单吗？',
					success: function(res){
						if(res.confirm) {
							orderApi.delOrder({order_id: id}).then(ots => {
								if(ots.code === 1) {
									that.$common.msgShow('删除成功')
									that.getList()
								}else {
									that.$common.msgShow(ots.msg)
								}
							})
						}
					}
				})
			},
			
			//跳转订单详情
			orderDetail(val) {
				let that = this
				if(val.status === 0) {
					uni.navigateTo({
						url: '/pagesOrder/payOrder/payOrder?orderNo=' + val.order_no
					})
				}else if(val.status === 2) {
					uni.showModal({
						title: '温馨提示',
						confirmColor: '#0177FD',
						confirmText: '确认验收',
						cancelColor: '#999',
						cancelText: '再想想',
						content: '是否确认验收服务',
						success:function(ots){
							if(ots.confirm) {
								orderApi.sureOrder({order_id: val.id, status: 3}).then(res => {
									if(res.code === 1) {
										that.$common.msgShow('验收成功')
										that.getList()
									}else {
										that.$common.msgShow(ots.msg)
									}
								})
							}
						}
					})
				}else {
					uni.navigateTo({
						url: '/pagesOrder/orderDetail/orderDetail?orderNo=' + val.order_no
					})
				}
			},
			       
			//跳转服务商详情
			goService(val) {
				uni.navigateTo({
					url: '/pagesShop/serviceDetail/serviceDetail?id=' + val.id
				})
			},
			
			//跳转订单详情
			goShopInfo(val) {
				uni.navigateTo({
					url: '/pagesOrder/orderDetail/orderDetail?orderNo=' + val.order_no
				})
			},
			
			//下拉刷新
			refresherrefresh() {
				this.isRefreshing = true;
				this.page = 1
				this.getList()
			},
			
			//上拉加载
			loadMore() {
				if (this.listStatus == 'more') {
					this.page += 1
					this.getList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'myOrder.scss';
</style>
